<template>
	<view class="mainBg h100 ">
		<navbar title="修改资料" />
		<view class="content" @click="chooseImage">
			<image :src="avatarUrl" mode=""></image>
			<view class="right">
				修改头像 <uni-icons type="right" size="16" color="#ccc"></uni-icons>
			</view>
		</view>
		<!-- <view class="submit">
			确认
		</view> -->
	</view>
</template>

<script>
	import {
		domain
	} from "@/utils/request.js"
	export default {
		data() {
			return {
				avatarUrl: '',
				domain: ''
			}
		},
		onLoad(option) {
			this.avatarUrl = option.avatarUrl
			this.domain = domain
		},
		methods: {
			chooseImage() {
				uni.chooseImage({
					count: 1,
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						this.$loading("上传中...")
						uni.uploadFile({
							url: domain + '/user/upload', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								'Authorization': 'Bearer ' + uni.getStorageSync('token')
							},
							success: (uploadFileRes) => {
								const data = JSON.parse(uploadFileRes.data)
								console.log(data)
								this.save((data.data.ossId))
							}
						});
					}
				});
			},
			save(avatar) {
				this.$post("/user/updateAvatar", {
					avatar
				}).then(res => {
					if (res.code == 200) {
						this.$toast("操作成功")
						this.avatarUrl = res.data.userInfo.avatarUrl
						setTimeout(() => {
							uni.navigateBack()
						}, 500)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #35CBAD;
	}

	.content {
		background-color: #fff;
		font-size: 28rpx;
		border-radius: 8rpx;
		padding: 30rpx 40rpx;
		margin-bottom: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #999;

		image {
			width: 72rpx;
			height: 72rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}
	}


	.submit {
		background: linear-gradient(180deg, rgba(130, 234, 154, 1) 0%, rgba(81, 199, 108, 1) 100%);
		text-align: center;
		border-radius: 100px;
		color: #fff;
		line-height: 82rpx;
		font-size: 32rpx;
		margin-top: 80rpx;
	}
</style>